<template>
  <span>
    <span v-if="preview && value">
      <img :src="value" class="preview-img" alt="">
    </span>
    <span @click="handleShowModal()">
      <Button size="small" ghost type="primary"
        >选择照片</Button
      >
    </span>
    <!-- 页面背景图片选择 -->
    <Modal width="1200px" v-model="showModalFlag">
      <ossManage
        @callback="handleImageSelect"
        :isComponent="true"
        :initialize="showModalFlag"
        ref="imgPicker"
      />
    </Modal>
  </span>
</template>

<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
export default {
  components: {
    ossManage,
  },
  props: {
    value: {

    },
    preview: {
      default: false
    }
  },
  data() {
    return {
      showModalFlag: false,
    };
  },
  methods: {
    handleImageSelect(val) {
      this.showModalFlag = false;
      this.$emit("change", val.url);
    },
    handleShowModal() {
      this.$refs.imgPicker.selectImage = true;
      this.showModalFlag = true;
    },
  },
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: 'value',
    event: 'change'
  }
};
</script>

<style lang="scss" scoped>
.preview-img{
  width: 100px;
  height: 100px;
}
</style>
